<template>
  <div class="about">
    // greetingMessage --> greeting-message
    <DemoArchive
      :name="demoArchiveName"
      greeting-message="你好，组件"
      v-model:count="count"
    ></DemoArchive>
    <span>鼠标坐标: {{ x }},{{ y }}</span>
  </div>
</template>

<script setup>
import DemoArchive from "@/components/DemoArchive.vue";
import { useCount } from "@/stores/count.js";
import { useMouse } from "@vueuse/core";

const demoArchiveName = "点击我";

// 从全局的组合式函数中获取状态
const count = useCount();

const { x, y } = useMouse();

// const handleCount = (value) => {
//   // 接收到来自子组件的count事件
//   count.value = value;
//   console.log(value);
// };
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
